<template>
	<div :style="{ height: `${tableHeight + 20}px` }" style="overflow-y: auto;overflow-x: hidden;">
		<div class="flex-center margin-bottom-10">
			<el-tag type="danger" size="mini" style="width: 90px;" class="text-center item-gap">已呼叫</el-tag>
			<el-tag type="primary" size="mini" style="width: 90px;" class="text-center">正常</el-tag>
		</div>
		<el-row class="flex-start-center-wrap" :gutter="12">
			<el-col
				v-for="(machineItem, machineIndex) in dataList"
				:key="machineIndex"
				:xl="4"
				:lg="6"
				:md="8"
				:sm="8"
				:xs="12"
			>
				<div :style="{ background: machineItem.faultState ? '#fff2e8' : '#f0f5ff', color: machineItem.faultState ? '#fa541c' : '#1890ff', borderColor: machineItem.faultState ? '#ffbb96' : '#adc6ff' }" class="data-item" style="width: 100%;box-sizing: border-box;">
					<div class="data-item-content">
						<span class="el-icon-receiving data-item-icon"></span>
						<div class="width-100-percent">
							<div style="font-size: 22px;display: flex;justify-content: space-between;align-items: center;width: 100%;margin-bottom: 12px;">
								<span>{{ machineItem.name }}</span>
							</div>
							<div style="font-size: 13px;color:#808695;">{{ machineItem.processName }}</div>
							<div style="font-size: 13px;color:#808695;">{{ machineItem.workshopName }}</div>
						</div>
						<el-button style="position: absolute;top: 50%;right: 10px;margin-top: -20px;" class="" :disabled="!!machineItem.faultState" type="text" size="large" icon="el-icon-phone" @click="onCallBtn(machineItem)">呼叫</el-button>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
    export default {
        props: {
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            },
            tableHeight: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                tableLoading: false
            };
        },
        methods: {
            onCallBtn(e) {
                this.$emit('on-call', e);
            }
        }
    };
</script>
<style scoped lang="scss">
    .data-item {
        height: 130px;
        border-radius: 6px;
        border: solid 1px #dcdee2;
        padding: 16px 12px;
        margin-bottom: 12px;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        .data-item-content {
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            .data-item-icon {
                color: #dcdee2;
                font-size: 42px;
                margin-right: 16px;
            }
        }
    }
    .data-item:hover {
        border: solid 2px #2d8cf0;
    }
</style>
